@babel/preset-react

What is @babel/preset-react?

The @babel/preset-react npm package is a Babel preset that can be used to transform JSX into standard JavaScript. It is commonly used in React applications to allow developers to write JSX, which is a syntax extension for JavaScript that looks similar to HTML. This preset includes the necessary Babel plugins to parse and transform JSX syntax.

What are @babel/preset-react's main functionalities?

Transform JSX

Converts JSX syntax into createElement calls which are understood by React.

const element = <div>Hello, world!</div>;

Support for React Fragments

Allows the use of React Fragments to group a list of children without adding extra nodes to the DOM.

const element = <><div>Item 1</div><div>Item 2</div></>;

Support for JSX Spread Attributes

Enables the spreading of attributes in JSX elements from an object.

const props = { firstName: 'John', lastName: 'Doe' }; const element = <div {...props} />;

Support for JSX Expression Containers

Allows embedding expressions in JSX by wrapping them in curly braces.

const name = 'world'; const element = <div>Hello, {name}!</div>;

Other packages similar to @babel/preset-react

babel-preset-react-app

This package is similar to @babel/preset-react but is specifically tailored for Create React App projects. It includes additional Babel plugins and configurations suitable for the React scripts bundled with Create React App.

babel-preset-react-hmre

This preset is designed for hot module replacement in React applications during development. It is not a direct alternative to @babel/preset-react but offers additional functionality for a specific development workflow.

README

@babel/preset-react

Babel preset for all React plugins.

See our website @babel/preset-react for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/preset-react

or using yarn:

yarn add @babel/preset-react --dev

Changelog

v7.26.3 (2024-12-04)

:bug: Bug Fix

• babel-generator
  • #16958 [preserveFormat] force semicolons when invalidating ASI (@nicolo-ribaudo)

:house: Internal

• babel-helper-builder-binary-assignment-operator-visitor, babel-plugin-transform-exponentiation-operator
  • #16895 Remove helper-builder-binary-assignment-operator-visitor (@nicolo-ribaudo)

:running_woman: Performance

• babel-generator
  • #16959 perf: Reduce the use of temporary objects (@liuxingbaoyu)
• babel-traverse
  • #16923 perf: Improve scope information collection performance (@liuxingbaoyu)
  • #16964 perf: Avoid repeated traversal when creating scope (@liuxingbaoyu)
• babel-plugin-transform-modules-commonjs
  • #16954 perf: Remove use of simplifyAccess (@liuxingbaoyu)